<template>
    <div class="con">

    
    
        <div class="header">
            <div>
                <div class="title">已用总流量</div>
                <div class="num">50GB</div>
            </div>
            <div>
                <div class="title">剩余总流量</div>
                <div class="num">50GB</div>
            </div>
        </div>
        <div>

            <!-- 标签页先注释掉, 后续版本再看 -->
            <!-- <div class="tab-area">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="流量消耗明细" name="consume" />
                    <el-tab-pane label="流量充值明细" name="Recharge" />
                </el-tabs>
            </div> -->
            <!-- 数据表格 -->
            <div class="table-container">
                <el-table :data="paginatedData" style="width: 100%;margin-top: 20px" border stripe
                    :header-cell-style="{ background: '#f5f7fa' }">
                    <!-- 表格列定义保持不变 -->
                    <el-table-column prop="time" label="日期" min-width="160" />
                    <el-table-column prop="total" label="流量总消耗(GB)" min-width="160" />

                    <!-- <el-table-column prop="userId" label="用户ID" min-width="120" />
                    <el-table-column prop="k" v-if="activeTab == 'consume'" label="流量总消耗（GB）" min-width="120" />
                    <el-table-column prop="m" v-if="activeTab == 'consume'" label="视频播放流量（GB）" min-width="120" />
                    <el-table-column prop="n" v-if="activeTab == 'consume'" label="直播流量（GB）" min-width="160" />

                    <el-table-column prop="a" v-if="activeTab == 'Recharge'" label="流量包编号" min-width="160" />
                    <el-table-column prop="b" v-if="activeTab == 'Recharge'" label="流量包名称" min-width="160" />
                    <el-table-column prop="c" v-if="activeTab == 'Recharge'" label="流量包总量（GB）" min-width="160" />
                    <el-table-column prop="d" v-if="activeTab == 'Recharge'" label="已使用流量（GB）" min-width="160" />
                    <el-table-column prop="e" v-if="activeTab == 'Recharge'" label="剩余流量（GB）" min-width="160" />
                    <el-table-column prop="f" v-if="activeTab == 'Recharge'" label="过期流量（GB）" min-width="160" />
                    <el-table-column prop="g" v-if="activeTab == 'Recharge'" label="流量包状态（GB）" min-width="160" />
                    <el-table-column prop="l" v-if="activeTab == 'Recharge'" label="生效时间" min-width="160" />
                    <el-table-column prop="h" v-if="activeTab == 'Recharge'" label="过期时间" min-width="160" /> -->

                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                        :total="filteredTableData.length" :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" background="true" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible'])



// 标签页激活项
// const activeTab = ref('consume');

const rawData = ref([
    {
        userId: '1',
        time: '2025-07-28',
        total: '1006'
    }
]);

// 过滤后的表格数据(计算属性)
const filteredTableData = computed(() => {
    return rawData.value
    // return rawData.value.filter(item => {
    //    console.log(item)
    // });
});

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
});

// 分页配置
const paginatedData = computed(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    return filteredTableData.value.slice(start, end);
});

// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    console.log('每页条数变化:', size);
    // 调用API获取对应条数的数据
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    console.log('当前页变化:', page);
    // 调用API获取对应页的数据
};

</script>

<style scoped lang="scss">
.con {
    background: #fff;
    overflow: hidden;
}
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 20px;

    div {
        height: 66px;
        background: #F7F7F7;
        border-radius: 10px;
        width: 49%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;

        .title {
            margin-top: 12px;
            margin-left: 12px;
            font-size: 14px;
            color: #999999;
        }

        .num {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 16px;
            color: #2D7AF7;
            margin-left: 12px;
        }
    }
}
.tab-area {
    margin-bottom: 20px;
}
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}
</style>